<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    </div>
</body>

<script>

</script>
<script>
    const Vue = {
        createRenderer({ querySelector, insert }){
            return{
                createApp(options){
                    return{
                        mount(selector){
                            const parent = querySelector(selector)

                            if(!options.render){
                                options.render = this.compile(parent.innerHTML)
                            }

                            if(options.setup){
                                this.setupState = options.setup()
                            }

                            if(options.data){
                                this.data = options.data()
                            }

                        const proxy =  new Proxy(this,{
                            get(target,key){
                                if(target.setupState && key in target.setupState){
                                    return target.setupState[key]
                                }else{
                                    return target.data[key]
                                }
                            },
                            set(target,key,val){
                                if(target.setupState && key in target.setupState){
                                    target.setupState[key] = val
                                }else{
                                    target.data[key] = val
                                }
                            }
                        })
                        const el = options.render.call(proxy)
                        parent.innerHTML = ''
                        insert(el,parent)

                        },
                        compile(template){
                            return function render(){
                                const h3 = document.createElement('h3')
                                h3.textContent = this.title
                                return h3
                            }
                        }
                    }
                }
            }
        },
        createApp(options) {
            const renderer = Vue.createRenderer({
                querySelector(sel){
                    return document.querySelector(sel)
                },
                insert(el,parent){
                    parent.appendChild(el)
                }
            });
            return renderer.createApp(options)
        },
    };

</script>

<script>
    const app = Vue.createApp({
        data(){
            return{
                title:'hello,vue3'
            }
        },
        setup(){
            return{
                title:'vue3,hello'
            }
        }
    })

    app.mount('#app')
</script>
</html>